<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input size="small" v-model.trim="form.qc_user" placeholder="仓检员姓名" style="width: 150px;" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="form.qc_date" type="daterange" unlink-panels range-separator="至" size="small" value-format="yyyy-MM-dd" :clearable="false"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini">
                <el-table-column prop="qc_user" label="仓检员姓名"></el-table-column>
                <el-table-column prop="total_num" label="总数"></el-table-column>
                <el-table-column prop="pass_num" label="合格数"></el-table-column>
                <el-table-column prop="un_pass_num" label="不合格数"></el-table-column>
                <el-table-column prop="rate" label="合格率">
                    <template slot-scope="{row}">
                        <el-tag v-if="row.rate>=90" size="mini" type="success">{{row.rate}}%</el-tag>
                        <el-tag v-else-if="row.rate>=80" size="mini" type="warning">{{row.rate}}%</el-tag>
                        <el-tag v-else size="mini" type="danger">{{row.rate}}%</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="{row}">
                        <el-button type="text" size="small" class="el-icon-view" @click="detailBtn(row)">&nbsp;查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--人员统计详情-->
        <el-drawer :title="detailTitle" :visible.sync="detailVisible" size="1200px" direction="rtl" :wrapperClosable="false" :before-close="closeBtn">
            <el-row style="padding: 0 10px 20px 20px;">
                <el-col class="box" v-loading="statisticLoading" v-for="(item, index) in options" :key="index">
                    <div style="font-size: 14px;font-weight: bold;margin-bottom: 10px">{{item.title}}</div>
                    <el-form label-position="left" label-width="80px">
                        <el-form-item label="仓检总数">
                            <span style="font-weight: bold">{{detail[item.column].total_num}}</span>
                        </el-form-item>
                        <el-form-item label="合格数">
                            <span style="font-weight: bold;color: #57a3f3">{{detail[item.column].pass_num}}</span>
                        </el-form-item>
                        <el-form-item label="不合格数">
                            <span style="font-weight: bold;color: #ff7171;">{{detail[item.column].un_pass_num}}</span>
                        </el-form-item>
                        <el-form-item label="合格率">
                            <span style="color: #67C23A;font-weight: bold">{{detail[item.column].rate}}%</span>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-row>
                    <el-form inline>
                        <el-form-item>
                            <el-date-picker v-model="detailForm.qc_date" type="daterange" unlink-panels range-separator="至" size="small" value-format="yyyy-MM-dd"
                                            :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="detailForm.status" placeholder="质检状态" style="width: 120px" size="small" clearable>
                                <el-option :value=1 label="合格"></el-option>
                                <el-option :value=0 label="不合格"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="el-icon-search" @click="searchDetailData" size="small" :loading="btnLoading">查询</el-button>
                            <el-button type="text" class="el-icon-download" @click="getExcelFileBtn" size="small" :loading="downloading">&nbsp;导出</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="detailList" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }" style="width: 100%;"
                              v-loading="detailLoading" :max-height="tableHeight2">
                        <el-table-column label="款号" prop="type_no"></el-table-column>
                        <el-table-column label="RFID编码" prop="number"></el-table-column>
                        <el-table-column label="仓检员" prop="qc_user"></el-table-column>
                        <el-table-column label="工厂名称" prop="factory_name"></el-table-column>
                        <el-table-column label="验货期" prop="qc_time"></el-table-column>
                        <el-table-column label="仓检结果" prop="status" width="100">
                            <template slot-scope="{row}">
                                <el-tag size="mini" type="success" v-if="row.status==1">合格</el-tag>
                                <el-tooltip v-else effect="dark" :content="row.reason_title" placement="top-start">
                                    <el-tag size="mini" type="danger" >不合格</el-tag>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="图片" prop="qc_img" width="50">
                            <template slot-scope="{ row }">
                                <el-image v-if="row.qc_img" :src="row.qc_img" fit="contain" :preview-src-list="[row.qc_img]">
                                    <div slot="error" class="image-slot">
                                        <svg t="1718681716906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2623" width="20" height="20"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2624"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2625"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2626"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2627"></path></svg>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--翻页栏-->
                    <div style="margin-top: 4px;overflow: hidden;float: right;">
                        <Page :total="detailTotal" :current="detailPage" :page-size="limit" show-total @on-change="pageDetailChange"></Page>
                    </div>
                </el-row>
            </el-row>
        </el-drawer>

        <!--导出-->
        <el-dialog title="导出管理" :visible.sync="exportVisible" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="exportCloseBtn" width="800px">
            <el-table :data="excelFile" style="width: 100%" height="400px" size="small">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="create_user" label="创建人" width="90"></el-table-column>
                <el-table-column prop="create_time" label="导出时间" width="135"></el-table-column>
                <el-table-column prop="name" label="文件" width="220"></el-table-column>
                <el-table-column prop="status" label="操作">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 0 && exportCache.process < 100">
                            <el-progress :text-inside="true" :stroke-width="16" status="success" :percentage="exportCache.process"></el-progress>
                        </span>
                        <span v-else>
                            <el-button type="text" class="el-icon-download" size="small" @click="downloadBtn(scope.row.name)">&nbsp;下载</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer">
                <el-button @click="exportCloseBtn" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="exportDataBtn" size="small" :loading="saveLoading"
                           :disabled="exportCache.file && exportCache.process<100">添加计划</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {wcheckList, wcheckRosterList, wcheckRosterStatistic} from "@/api/produce/wc";
import {formatDate} from "@/libs/tools";
import {wcheckExcelList, wcheckExportCache, wcheckExportData} from "../../../api/produce/wc";

export default {
    name: "produce_wc_roster",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {qc_user: "", qc_date: [formatDate(new Date().getTime(), "date"), formatDate(new Date().getTime(), "date")]},
            pickerOptions: {
                shortcuts: [
                    {
                        text: '昨天',
                        onClick(picker) {
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit('pick', [start, start]);
                        }
                    },{
                        text: '今天',
                        onClick(picker) {
                            const start = new Date();
                            picker.$emit('pick', [start, start]);
                        }
                    },{
                        text: '近7天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '当月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(new Date(formatDate(new Date().getTime(), 'month_first_day')));
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '上月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(new Date(formatDate(new Date().getTime(), 'last_month_first_day')));
                            end.setTime(new Date(formatDate(new Date().getTime(), 'last_month_last_day')))
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '今年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(new Date(formatDate(new Date().getTime(), 'year')+"-01-01"));
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '去年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(new Date(formatDate(new Date().getTime(), 'last_year')+"-01-01"));
                            end.setTime(new Date(formatDate(new Date().getTime(), 'last_year')+"-12-31"));
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },

            tableHeight2: window.innerHeight - 400,
            options: [
                {title: "仓检数据统计 -- 今日", column: "today"},
                {title: "仓检数据统计 -- 昨日", column: "yesterday"},
                {title: "仓检数据统计 -- 近7日", column: "day_7"},
                {title: "仓检数据统计 -- 当月", column: "current_month"},
                {title: "仓检数据统计 -- 上月", column: "last_month"},
                {title: "仓检数据统计 -- 今年", column: "current_year"},
                {title: "仓检数据统计 -- 去年", column: "last_year"},
            ],
            detailVisible: false,
            statisticLoading: false,
            detailLoading: false,
            detailTitle: "",
            detail: {today: {}, yesterday: {}, day_7:{},current_month:{},last_month:{},current_year:{}, last_year:{}},
            detailList: [],
            detailPage: 1,
            detailTotal: 0,
            detailForm: {all: 0,user_id: "", qc_date: [formatDate(new Date().getTime(), "date"), formatDate(new Date().getTime(), "date")], status: ""},

            //导出
            saveLoading: false,
            downloading: false,
            excelFile: [],
            exportCache: {},
            exportVisible: false,
            exportTimeout: null,
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        searchDetailData(){
            this.detailPage = 1;
            this.getDetailData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        pageDetailChange(page){
            this.detailPage = page;
            this.getDetailData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            wcheckRosterList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        //查看
        detailBtn(row){
            this.detailVisible = true;
            this.detailTitle = "个人仓检统计数据 -- "+row.qc_user;
            this.detailForm.user_id = row.user_id;
            this.$set(this.detailForm, 'qc_date', this.form.qc_date);
            this.statistic(row);
            this.getDetailData();
        },
        //个人统计
        statistic(row){
            this.statisticLoading = true;
            wcheckRosterStatistic({user_id: row.user_id}).then((res) =>{
                this.statisticLoading = false;
                this.detail = res.data;
            }).catch(()=>{
                this.statisticLoading = false;
            })
        },
        getDetailData(){
            let param = {
                page: this.detailPage,
                limit: this.limit
            };
            param = Object.assign(param, this.detailForm);
            this.detailLoading = true;
            wcheckList(param).then((res) => {
                this.detailLoading = false;
                this.detailList = res.data.data;
                this.detailTotal = res.data.total;
            }).catch(() =>{
                this.detailLoading = false;
            });
        },
        closeBtn(){
            this.detailVisible = false;
            this.detail = {today: {}, yesterday: {}, day_7:{},current_month:{},last_month:{},current_year:{}, last_year:{}};
        },

        //导出
        getExcelFileBtn(){
            this.downloading = true;
            wcheckExcelList().then((res) =>{
                this.downloading = false;
                this.excelFile = res.data.data;
                this.exportCache = res.data.cache;
                this.exportVisible = true;
                if(this.exportCache.file && this.exportCache.process<100){
                    this.loopExportCache();
                }
            }).catch(()=>{
                this.downloading = false;
            })
        },
        exportCloseBtn(){
            clearTimeout(this.exportTimeout);
            this.exportTimeout = null;
            this.exportVisible = false;
        },
        loopExportCache(){
            let that = this;
            wcheckExportCache().then((res) =>{
                if(res.data.file && res.data.process<100){
                    this.exportCache = res.data;
                    this.exportTimeout = setTimeout(function (){
                        that.loopExportCache();
                    },2000)
                }else{
                    this.exportCache = {};
                }
            })
        },
        exportDataBtn(){
            this.$confirm(`根据当前查询条件,共${this.detailTotal}条数据，添加导出计划, 确定继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                wcheckExportData(this.detailForm).then((res) =>{
                    if(res.code === 0){
                        this.$message.success("计划已添加");
                        this.getExcelFileBtn();
                    }else{
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {});
        },
        downloadBtn(name){
            window.open('/api/tool/fileExport'+`?path=cache/wcCheck&type=file&name=${name}`, '_self');
        },
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>
.box{
    width: 160px;
    margin-bottom: 10px;
    background-color: #2d8cf033;
    border-radius: 4px;
    padding: 8px;
    margin: 3px;
}
.box:hover{
    box-shadow: 1px 1px 5px #909399;
}
.box /deep/ .el-form-item{
    margin-bottom: 0;
}
.box /deep/ .el-form-item__label{
    color: #8c939d;
}

.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}
</style>
